<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成就系统 - C++学习网站</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/style2.css">
    <link rel="stylesheet" href="../css/achievements.css">
</head>
<body>
    <header>
        <nav>
            <!-- 移动端主题切换按钮 -->
            <button id="mobile-theme-toggle" class="mobile-theme-toggle-btn">
                <i class="fas fa-sun"></i>
                <i class="fas fa-moon"></i>
            </button>
            <div class="logo">C++学习入门</div>
            <ul class="nav-links">
                <li><a href="../index.html">首页</a></li>
                <li><a href="basics.html">基础语法</a></li>
                <li><a href="oop.html">面向对象</a></li>
                <li><a href="advanced.html">高级特性</a></li>
                <li><a href="effective.html">Effective C++</a></li>
                <li><a href="stl.html">STL源码剖析</a></li>
                <li><a href="quiz.html">题库</a></li>
                <li><a href="achievements.html" class="active">成就系统</a></li>
                <li><a href="../forum.html">论坛</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle">账户 <i class="fas fa-chevron-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="#login-modal">登录</a></li>
                        <li><a href="#register-modal">注册</a></li>
                    </ul>
                </li>
                <li><a href="../about.html">关于我们</a></li>
                <li><button id="theme-toggle" class="theme-toggle-btn">
                        <i class="fas fa-sun"></i>
                        <i class="fas fa-moon"></i>
                    </button></li>
            </ul>
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </nav>
    </header>

    <!-- 主容器 -->
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">
                <i class="fas fa-trophy"></i>
                成就系统
            </h1>
            <p class="page-description">通过完成C++学习挑战来解锁各种成就，展示你的学习成果！</p>
        </div>

        <!-- 登录提示 -->
        <div id="login-required-notice" class="login-notice" style="display: none;">
            <div class="notice-content">
                <i class="fas fa-info-circle"></i>
                <div class="notice-text">
                    <h3>需要登录账户</h3>
                    <p>为了获得成就并保存您的学习进度，请先登录您的账户。如果您还没有账户，可以免费注册一个。</p>
                </div>
            </div>
        </div>

        <!-- 成就统计 -->
        <div id="achievement-stats" class="achievement-stats" style="display: none;">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="unlocked-count">0</h3>
                        <p>已解锁成就</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="locked-count">5</h3>
                        <p>待解锁成就</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="progress-percentage">0%</h3>
                        <p>完成进度</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-calendar"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="latest-achievement">暂无</h3>
                        <p>最新成就</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成就列表 -->
        <div id="achievements-container" class="achievements-container" style="display: none;">
            <h2 class="section-title">
                <i class="fas fa-award"></i>
                我的成就
            </h2>
            <div id="achievements-grid" class="achievements-grid">
                <!-- 成就卡片将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 成就指南 -->
        <div class="achievement-guide">
            <h2 class="section-title">
                <i class="fas fa-map"></i>
                成就获取指南
            </h2>
            <div class="guide-grid">
                <div class="guide-card">
                    <div class="guide-icon">🌱</div>
                    <h3>初出茅庐</h3>
                    <p>完成基础语法部分的8道题目并全部答对。这是您C++学习旅程的第一步！</p>
                    <div class="guide-requirement">
                        <i class="fas fa-check-circle"></i>
                        基础语法：8/8 正确
                    </div>
                </div>
                <div class="guide-card">
                    <div class="guide-icon">🔧</div>
                    <h3>牛刀小试</h3>
                    <p>掌握面向对象编程的核心概念，完成所有相关题目并取得满分。</p>
                    <div class="guide-requirement">
                        <i class="fas fa-check-circle"></i>
                        面向对象：8/8 正确
                    </div>
                </div>
                <div class="guide-card">
                    <div class="guide-icon">🏛️</div>
                    <h3>登堂入室</h3>
                    <p>深入理解C++的高级特性，包括模板、异常处理等复杂概念。</p>
                    <div class="guide-requirement">
                        <i class="fas fa-check-circle"></i>
                        高级特性：8/8 正确
                    </div>
                </div>
                <div class="guide-card">
                    <div class="guide-icon">💎</div>
                    <h3>精益求精</h3>
                    <p>掌握Effective C++的最佳实践，成为真正的C++编程专家。</p>
                    <div class="guide-requirement">
                        <i class="fas fa-check-circle"></i>
                        Effective C++：8/8 正确
                    </div>
                </div>
                <div class="guide-card">
                    <div class="guide-icon">👑</div>
                    <h3>登峰造极</h3>
                    <p>深入STL源码解析，达到C++编程的最高境界。</p>
                    <div class="guide-requirement">
                        <i class="fas fa-check-circle"></i>
                        STL源码解析：8/8 正确
                    </div>
                </div>
            </div>
        </div>

        <!-- 学习建议 -->
        <div class="learning-tips">
            <h2 class="section-title">
                <i class="fas fa-lightbulb"></i>
                学习建议
            </h2>
            <div class="tips-content">
                <div class="tip-item">
                    <i class="fas fa-graduation-cap"></i>
                    <div>
                        <h4>循序渐进</h4>
                        <p>建议按照基础语法 → 面向对象 → 高级特性 → Effective C++ → STL源码解析的顺序学习。</p>
                    </div>
                </div>
                <div class="tip-item">
                    <i class="fas fa-code"></i>
                    <div>
                        <h4>实践为主</h4>
                        <p>理论学习后，通过题库练习巩固知识点，发现并填补知识盲区。</p>
                    </div>
                </div>
                <div class="tip-item">
                    <i class="fas fa-users"></i>
                    <div>
                        <h4>交流讨论</h4>
                        <p>在讨论区与其他学习者交流心得，共同进步。</p>
                    </div>
                </div>
                <div class="tip-item">
                    <i class="fas fa-clock"></i>
                    <div>
                        <h4>持续学习</h4>
                        <p>C++是一门复杂的语言，需要持续不断地学习和练习。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 登录模态框 -->
    <div id="login-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>用户登录</h2>
            <form id="login-form" class="auth-form">
                <div class="form-group">
                    <label for="login-username">用户名</label>
                    <input type="text" id="login-username" name="username" required placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="login-password">密码</label>
                    <input type="password" id="login-password" name="password" required placeholder="请输入密码">
                </div>
                <div class="form-options">
                    <label class="checkbox-label">
                        <input type="checkbox" id="remember-me" name="remember-me">
                        记住我
                    </label>
                    <a href="#forgot-password-modal" class="forgot-password">忘记密码?</a>
                </div>
                <button type="submit" class="modal-btn">登录</button>
                <p class="register-link">还没有账号? <a href="#register-modal">立即注册</a></p>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="register-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>用户注册</h2>
            <form id="register-form" class="auth-form">
                <div class="form-group">
                    <label for="register-username">用户名</label>
                    <input type="text" id="register-username" name="username" required placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="register-email">邮箱</label>
                    <input type="email" id="register-email" name="email" required placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="register-password">密码</label>
                    <input type="password" id="register-password" name="password" required placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="register-confirm-password">确认密码</label>
                    <input type="password" id="register-confirm-password" name="confirm-password" required placeholder="请确认密码">
                </div>
                <div class="form-options">
                    <label class="checkbox-label">
                        <input type="checkbox" id="agree-terms" name="agree-terms" required> 我已阅读并同意<a href="#" class="terms-link">用户协议</a>和<a href="#" class="privacy-link">隐私政策</a>
                    </label>
                </div>
                <button type="submit" class="modal-btn">注册</button>
                <p class="login-link">已有账号? <a href="#login-modal">立即登录</a></p>
            </form>
        </div>
    </div>

    <!-- 忘记密码模态框 -->
    <div id="forgot-password-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>重置密码</h2>
            <form id="forgot-password-form" class="auth-form">
                <div class="form-group">
                    <label for="forgot-email">邮箱</label>
                    <input type="email" id="forgot-email" name="email" required placeholder="请输入注册邮箱">
                </div>
                <div class="form-group">
                    <label for="forgot-new-password">新密码</label>
                    <input type="password" id="forgot-new-password" name="new-password" required placeholder="请输入新密码">
                </div>
                <div class="form-group">
                    <label for="forgot-confirm-password">确认新密码</label>
                    <input type="password" id="forgot-confirm-password" name="confirm-password" required placeholder="请确认新密码">
                </div>
                <button type="submit" class="modal-btn">重置密码</button>
                <p class="login-link">想起密码了? <a href="#login-modal">立即登录</a></p>
            </form>
        </div>
    </div>

    <!-- 用户协议模态框 -->
    <div id="terms-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>用户协议</h2>
            <div class="modal-text">
                                <h3>第一条 协议概述</h3>
                <p>欢迎使用C++学习入门网站（以下简称"本网站"）。本协议是您（以下简称"用户"）与本网站之间关于使用本网站服务的法律协议。请在使用本网站前仔细阅读本协议，一旦您开始使用本网站，即表示您同意接受本协议的全部条款。</p>
                
                <h3>第二条 服务内容</h3>
                <p>本网站致力于为用户提供优质的C++编程学习服务，主要包括但不限于：</p>
                <ul>
                    <li>C++基础语法、面向对象、高级特性等教学内容</li>
                    <li>在线测验题库和学习评估系统</li>
                    <li>用户学习进度跟踪和成就系统</li>
                    <li>学习论坛和用户交流平台</li>
                    <li>AI智能助手服务</li>
                    <li>其他与C++学习相关的辅助功能</li>
                </ul>
                
                <h3>第三条 用户注册与账户管理</h3>
                <ol>
                    <li><strong>注册要求</strong>：用户需要提供真实有效的邮箱地址和用户名进行注册</li>
                    <li><strong>账户安全</strong>：用户有责任保护自己的账户密码安全，不得将账户借给他人使用</li>
                    <li><strong>信息准确性</strong>：用户应确保注册信息的真实性和准确性</li>
                    <li><strong>账户停用</strong>：如发现用户提供虚假信息或违反本协议，网站有权停用相关账户</li>
                </ol>
                
                <h3>第四条 用户行为规范</h3>
                <p>用户在使用本网站时，应当遵守以下规范：</p>
                <p><strong>允许的行为：</strong></p>
                <ul>
                    <li>正常学习C++编程知识</li>
                    <li>在论坛中进行友善的学术讨论</li>
                    <li>分享学习心得和编程经验</li>
                    <li>合理使用AI助手进行学习辅导</li>
                </ul>
                <p><strong>禁止的行为：</strong></p>
                <ul>
                    <li>发布违法、有害、威胁、侮辱、诽谤的内容</li>
                    <li>发布与C++学习无关的广告或垃圾信息</li>
                    <li>恶意攻击网站系统或其他用户</li>
                    <li>传播病毒、恶意代码或有害程序</li>
                    <li>侵犯他人知识产权或隐私权</li>
                    <li>利用技术手段绕过网站的限制措施</li>
                </ul>
                
                <h3>第五条 知识产权</h3>
                <ol>
                    <li><strong>网站内容版权</strong>：本网站提供的所有教学内容、代码示例、题库等均受版权保护</li>
                    <li><strong>用户生成内容</strong>：用户在论坛发表的原创内容，版权归用户所有，但用户授予本网站使用权</li>
                    <li><strong>合理使用</strong>：用户可以将学习内容用于个人学习目的，但不得用于商业用途</li>
                    <li><strong>侵权处理</strong>：如发现侵权行为，请及时联系我们处理</li>
                </ol>
                
                <h3>第六条 AI助手服务条款</h3>
                <ol>
                    <li><strong>服务性质</strong>：AI助手仅作为学习辅助工具，提供编程相关的答疑和指导</li>
                    <li><strong>服务限制</strong>：AI助手的回答仅供参考，不保证绝对准确性</li>
                    <li><strong>使用规范</strong>：禁止利用AI助手进行违法、有害或与学习无关的活动</li>
                    <li><strong>数据使用</strong>：与AI助手的对话可能被记录用于改进服务质量</li>
                </ol>
                
                <h3>第七条 免责声明</h3>
                <ol>
                    <li><strong>服务可用性</strong>：网站不保证服务的不间断性和完全准确性</li>
                    <li><strong>第三方链接</strong>：对于第三方网站的内容，本网站不承担责任</li>
                    <li><strong>用户损失</strong>：因不可抗力或技术故障导致的用户损失，网站不承担责任</li>
                    <li><strong>内容责任</strong>：用户对其发布的内容承担全部法律责任</li>
                </ol>
                
                <h3>第八条 协议修改与终止</h3>
                <ol>
                    <li><strong>修改权利</strong>：本网站保留随时修改本协议的权利，修改后的协议将在网站上公布</li>
                    <li><strong>终止条件</strong>：如用户违反本协议，网站有权终止提供服务</li>
                    <li><strong>协议效力</strong>：本协议的终止不影响双方在终止前产生的权利义务</li>
                </ol>
                
                <h3>第九条 争议解决</h3>
                <p>本协议的解释和执行均适用中华人民共和国法律。如发生争议，双方应友好协商解决；协商不成的，可向网站所在地人民法院提起诉讼。</p>
                
                <h3>第十条 联系方式</h3>
                <p>如对本协议有任何疑问，请通过以下方式与我们联系：</p>
                <ul>
                    <li>邮箱：Hsy@bit.edu.cn</li>
                    <li>地址：北京理工大学良乡校区</li>
                </ul>
                
                <p><strong>生效日期</strong>：本协议自2025年9月14日起生效。
            </div>
            <button class="modal-btn" onclick="closeModal('terms-modal'); showModal('register-modal')">返回</button>
        </div>
    </div>

    <!-- 隐私政策模态框 -->
    <div id="privacy-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>隐私政策</h2>
            <div class="modal-text">
                                <h3>第一条 隐私政策概述</h3>
                <p>本隐私政策说明C++学习入门网站（以下简称"我们"或"本网站"）如何收集、使用、存储和保护您的个人信息。我们承诺保护您的隐私安全，请仔细阅读本政策。</p>
                
                <h3>第二条 信息收集</h3>
                <p>我们收集的信息类型包括：</p>
                
                <h4>1. 注册信息</h4>
                <ul>
                    <li>用户名</li>
                    <li>邮箱地址</li>
                    <li>密码（经过加密处理）</li>
                </ul>
                
                <h4>2. 学习数据</h4>
                <ul>
                    <li>学习进度和章节完成情况</li>
                    <li>测验成绩和答题记录</li>
                    <li>学习时长和访问频率</li>
                    <li>成就获得记录</li>
                </ul>
                
                <h4>3. 交互数据</h4>
                <ul>
                    <li>论坛发帖和回复内容</li>
                    <li>与AI助手的对话记录</li>
                    <li>用户反馈和建议</li>
                </ul>
                
                <h4>4. 技术信息</h4>
                <ul>
                    <li>IP地址和设备信息</li>
                    <li>浏览器类型和版本</li>
                    <li>操作系统信息</li>
                    <li>访问时间和页面浏览记录</li>
                </ul>
                
                <h3>第三条 信息使用目的</h3>
                <p>我们收集和使用您的个人信息主要用于以下目的：</p>
                
                <h4>1. 服务提供</h4>
                <ul>
                    <li>创建和管理用户账户</li>
                    <li>提供个性化学习内容</li>
                    <li>跟踪学习进度和成就</li>
                    <li>提供AI助手服务</li>
                </ul>
                
                <h4>2. 沟通联系</h4>
                <ul>
                    <li>发送重要通知和更新</li>
                    <li>回应用户询问和反馈</li>
                    <li>发送学习提醒和激励信息</li>
                </ul>
                
                <h4>3. 服务改进</h4>
                <ul>
                    <li>分析用户学习行为和偏好</li>
                    <li>优化网站功能和用户体验</li>
                    <li>开发新的学习功能</li>
                </ul>
                
                <h4>4. 安全保障</h4>
                <ul>
                    <li>防止欺诈和滥用行为</li>
                    <li>维护网站和用户安全</li>
                    <li>遵守法律法规要求</li>
                </ul>
                
                <h3>第四条 信息共享与披露</h3>
                <p>我们承诺不会出售您的个人信息，但在以下情况下可能共享信息：</p>
                
                <h4>1. 第三方服务商</h4>
                <ul>
                    <li>AI服务提供商（用于AI助手功能）</li>
                    <li>邮件服务提供商（用于发送验证邮件）</li>
                    <li>云存储服务商（用于数据备份）</li>
                </ul>
                
                <h4>2. 法律要求</h4>
                <ul>
                    <li>遵守适用法律法规的要求</li>
                    <li>响应政府部门的合法请求</li>
                    <li>保护我们或他人的合法权益</li>
                </ul>
                
                <h4>3. 业务转让</h4>
                <ul>
                    <li>在合并、收购或资产转让时，经用户同意后转让相关信息</li>
                </ul>
                
                <h3>第五条 数据存储与安全</h3>
                
                <h4>1. 存储方式</h4>
                <ul>
                    <li>用户数据主要存储在用户本地浏览器中</li>
                    <li>部分数据存储在安全的服务器环境中</li>
                    <li>采用加密技术保护敏感信息</li>
                </ul>
                
                <h4>2. 安全措施</h4>
                <ul>
                    <li>使用HTTPS协议保护数据传输</li>
                    <li>对密码进行加密存储</li>
                    <li>定期进行安全审计和漏洞修复</li>
                </ul>
                
                <h4>3. 数据保留</h4>
                <ul>
                    <li>账户信息在账户存续期间保留</li>
                    <li>学习数据保留期限不超过法律要求的期限</li>
                    <li>用户可以要求删除特定数据</li>
                </ul>
                
                <h3>第六条 用户权利</h3>
                <p>您对自己的个人信息享有以下权利：</p>
                <ol>
                    <li><strong>访问权</strong>：查看我们持有的您的个人信息</li>
                    <li><strong>更正权</strong>：更正不准确或不完整的个人信息</li>
                    <li><strong>删除权</strong>：在特定情况下要求删除您的个人信息</li>
                    <li><strong>限制处理权</strong>：限制我们处理您的个人信息</li>
                    <li><strong>数据携带权</strong>：以结构化格式获取您的数据副本</li>
                    <li><strong>撤回同意权</strong>：随时撤回对特定数据处理的同意</li>
                </ol>
                
                <h3>第七条 Cookie和跟踪技术</h3>
                
                <h4>1. Cookie使用</h4>
                <ul>
                    <li>用于保持登录状态和用户偏好</li>
                    <li>分析网站使用情况和性能</li>
                    <li>您可以通过浏览器设置控制Cookie</li>
                </ul>
                
                <h4>2. 本地存储</h4>
                <ul>
                    <li>使用localStorage存储学习进度</li>
                    <li>存储用户界面偏好设置</li>
                    <li>缓存常用数据以提升性能</li>
                </ul>
                
                <h3>第八条 儿童隐私保护</h3>
                <p>我们不会故意收集13岁以下儿童的个人信息。如果我们发现收集了儿童的个人信息，将立即删除相关信息。如果您是儿童的家长或监护人，发现儿童提供了个人信息，请联系我们。</p>
                
                <h3>第九条 国际数据传输</h3>
                <p>如果您的数据需要跨境传输，我们将采取适当的保护措施，确保数据安全，并遵守相关法律法规的要求。</p>
                
                <h3>第十条 政策更新</h3>
                <p>我们可能会不定期更新本隐私政策。重大变更时，我们会通过网站公告或邮件通知的方式告知您。继续使用我们的服务即表示您接受更新后的政策。</p>
                
                <h3>第十一条 联系我们</h3>
                <p>如果您对本隐私政策有任何疑问、意见或投诉，或希望行使您的个人信息权利，请通过以下方式联系我们：</p>
                <ul>
                    <li>邮箱：Hsy@bit.edu.cn</li>
                    <li>地址：北京理工大学良乡校区</li>
                </ul>
                <p>我们将在收到您的请求后30个工作日内给予回复。</p>
                
                <p><strong>生效日期</strong>：本隐私政策自2025年9月14日起生效。
            </div>
            <button class="modal-btn" onclick="closeModal('privacy-modal'); showModal('register-modal')">返回</button>
        </div>
    </div>

    <!-- JavaScript文件 -->
    <script src="../js/data-storage.js"></script>
    <script src="../js/achievements.js"></script>
    <script src="../js/main2.js"></script>
    <!-- AI助手 -->
    <script src="../js/ai-assistant.js"></script>
    <!-- 全局数据管理功能 -->
    <script src="../js/data-management-ui.js"></script>
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initAchievementsPage();
        });

        // 初始化成就页面
        function initAchievementsPage() {
            // 刷新成就系统的用户数据
            if (window.AchievementSystem && typeof window.AchievementSystem.refreshUserData === 'function') {
                window.AchievementSystem.refreshUserData();
            }
            
            const currentUser = window.AchievementSystem.getCurrentUser();
            
            if (!currentUser) {
                // 用户未登录，显示登录提示
                document.getElementById('login-required-notice').style.display = 'block';
                document.getElementById('achievement-stats').style.display = 'none';
                document.getElementById('achievements-container').style.display = 'none';
                console.log('用户未登录，显示登录提示');
            } else {
                // 用户已登录，显示成就内容
                document.getElementById('login-required-notice').style.display = 'none';
                document.getElementById('achievement-stats').style.display = 'block';
                document.getElementById('achievements-container').style.display = 'block';
                console.log(`用户 ${currentUser.username} 已登录，显示成就内容`);
                
                // 加载并显示成就数据
                loadAchievements();
            }
        }

        // 加载成就数据
        function loadAchievements() {
            const achievementSystem = window.AchievementSystem;
            const stats = achievementSystem.getAchievementStats();
            const achievements = achievementSystem.getAllAchievements();
            
            // 更新统计数据
            document.getElementById('unlocked-count').textContent = stats.unlocked;
            document.getElementById('locked-count').textContent = stats.locked;
            document.getElementById('progress-percentage').textContent = stats.progress + '%';
            
            // 获取最新解锁的成就
            const unlockedAchievements = achievementSystem.getUnlockedAchievements();
            if (unlockedAchievements.length > 0) {
                const latest = unlockedAchievements.sort((a, b) => 
                    new Date(b.unlockedAt) - new Date(a.unlockedAt)
                )[0];
                document.getElementById('latest-achievement').textContent = latest.name;
            }
            
            // 渲染成就卡片
            renderAchievements(achievements);
        }

        // 渲染成就卡片
        function renderAchievements(achievements) {
            const grid = document.getElementById('achievements-grid');
            grid.innerHTML = '';
            
            achievements.forEach(achievement => {
                const achievementCard = document.createElement('div');
                achievementCard.className = `achievement-card ${achievement.unlocked ? 'unlocked' : 'locked'}`;
                
                const unlockedDate = achievement.unlockedAt ? 
                    new Date(achievement.unlockedAt).toLocaleDateString('zh-CN') : '';
                
                achievementCard.innerHTML = `
                    <div class="achievement-icon">
                        ${achievement.unlocked ? achievement.icon : '🔒'}
                    </div>
                    <div class="achievement-content">
                        <h3 class="achievement-name">${achievement.name}</h3>
                        <p class="achievement-description">${achievement.description}</p>
                        <div class="achievement-requirement">
                            ${getRequirementText(achievement.requirement)}
                        </div>
                        ${achievement.unlocked ? 
                            `<div class="achievement-date">
                                <i class="fas fa-calendar"></i>
                                ${unlockedDate}
                            </div>` : 
                            '<div class="achievement-locked">未解锁</div>'
                        }
                    </div>
                    ${achievement.unlocked ? '<div class="achievement-badge"><i class="fas fa-check"></i></div>' : ''}
                `;
                
                grid.appendChild(achievementCard);
            });
        }

        // 获取要求文本
        function getRequirementText(requirement) {
            const sectionNames = {
                'basic': '基础语法',
                'oop': '面向对象',
                'advanced': '高级特性',
                'effective': 'Effective C++',
                'stl': 'STL源码解析'
            };
            
            return `${sectionNames[requirement.section]}：${requirement.score}/${requirement.total} 正确`;
        }

        // 打开登录模态框
        function openLoginModal() {
            const loginModal = document.getElementById('login-modal');
            if (loginModal) {
                closeAllModals();
                loginModal.style.display = 'block';
                document.body.style.overflow = 'hidden';
            } else {
                // 如果模态框不存在，发送自定义事件
                const event = new CustomEvent('openModal', { detail: 'login' });
                document.dispatchEvent(event);
            }
        }

        // 打开注册模态框
        function openRegisterModal() {
            const registerModal = document.getElementById('register-modal');
            if (registerModal) {
                closeAllModals();
                registerModal.style.display = 'block';
                document.body.style.overflow = 'hidden';
            } else {
                // 如果模态框不存在，发送自定义事件
                const event = new CustomEvent('openModal', { detail: 'register' });
                document.dispatchEvent(event);
            }
        }

        // 关闭所有模态框
        function closeAllModals() {
            const modals = ['login-modal', 'register-modal', 'forgot-password-modal', 'terms-modal', 'privacy-modal'];
            modals.forEach(modalId => {
                const modal = document.getElementById(modalId);
                if (modal) {
                    modal.style.display = 'none';
                }
            });
            // 恢复背景滚动
            document.body.style.overflow = '';
        }

        // 监听用户登录状态变化
        document.addEventListener('userLoginStateChanged', function() {
            initAchievementsPage();
        });

        // 添加localStorage监听器以检测跨标签页的登录状态变化
        let lastLoginState = localStorage.getItem('currentUser');
        
        // 监听localStorage变化（跨标签页）
        window.addEventListener('storage', function(e) {
            if (e.key === 'currentUser') {
                const currentLoginState = e.newValue;
                if (currentLoginState !== lastLoginState) {
                    lastLoginState = currentLoginState;
                    console.log('检测到localStorage中的登录状态变化，重新初始化页面');
                    initAchievementsPage();
                }
            }
        });

        // 定期检查登录状态变化（备用方案，处理同标签页内的变化）
        let lastUser = window.AchievementSystem.getCurrentUser();
        setInterval(function() {
            const currentUser = window.AchievementSystem.getCurrentUser();
            const currentUserStr = currentUser ? JSON.stringify(currentUser) : null;
            const lastUserStr = lastUser ? JSON.stringify(lastUser) : null;
            
            if (currentUserStr !== lastUserStr) {
                console.log('检测到用户登录状态变化，重新初始化页面');
                lastUser = currentUser;
                initAchievementsPage();
            }
        }, 2000); // 每2秒检查一次
    </script>

    <footer>
        <p>&copy; 2025 C++学习入门网站. 保留所有权利.</p>
    </footer>
</body>
</html>
